<template>
  <div class="centent">
    <el-row>
      <el-upload
        class="upload-demo"
        action="http://192.168.2.200:8888/rest/model/import-process-model"
        :limit="10"
        accept="xml"
        :on-success="xml_successxml"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" style="width: 80px;height: 33px;" @click="to_index()">新建</el-button>
      </el-upload>
      <!-- <el-button type="primary" icon="el-icon-download" size="mini" @click="openFile">导入模板</el-button> -->
    </el-row>
    <div style="margin-top: 20px;" />
    <div style="background-color: #FFFFFF;">
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="date" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="text" @click="deploy(scope.row,scope.$index)">部署</el-button>
            <el-button type="text" @click="open(scope.row,scope.$index)">查看XML</el-button>
            <el-button type="text" @click="openPic(scope.row,scope.$index)">查看图片</el-button>
            <el-button type="text" @click="edit(scope.row,scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="Key" label="Key" width="180" />
        <el-table-column prop="system" label="系统" />
        <el-table-column prop="describe" label="描述" width="180" />
        <el-table-column prop="Founder" label="创建人" />
        <el-table-column prop="date" label="创建时间" />
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: center;">
        <el-pagination
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </div>
</template>

<script>
import IP from '../../Yapi/config.js'
export default {
  data() {
    return {
      // Upload
      fileList: [],
      //  列表数据源
      tableData: [],
      // 213
      currentPage: 1,
      total: 0
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    //   导入xml
    // openFile(name){
  //     console.log(11111)

    // },
    xml_successxml() {
      this.$message({
        message: '上传成功',
        type: 'success'
      })
      this.loadList()
    },
    //  部署
    deploy(id, index) {
      this.$Http.deploy({ modelId: id.id }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          })
        }
      })
    },
    //   打开图片
    openPic(id, index) {
      window.open(`${IP.ASK_IP}rest/model/loadPngByModelId/${id.id}`, '_blank')
    },
    //   打开XML
    open(id, index) {
      window.open(`${IP.ASK_IP}rest/model/loadXmlByModelId/${id.id}`, '_blank')
    },
    //  编辑
    edit(id, index) {
      this.$axios.get(`${IP.ASK_IP}rest/model/loadXmlByModelId/${id.id}`).then((response) => {
        // console.log(response)
        if (response.status == 200) {
          this.$router.push({ path: '/index', query: { xml: response.data }})
        }
      })
    },
    // 跳转在线编辑页面
    to_index() {
      this.$router.push('/index')
    },
    //   加载时请求的列表页数据
    loadList() {
      this.$Http.allList({ pageNum: 1, pageSize: 10 }).then(res => {
        if (res.code === 200) {
          this.total = res.result.total
          for (let i = 0; i < res.result.data.length; i++) {
            const newDate = this.formatDate(res.result.data[i].created)
            this.tableData.push({
              type: '',
              name: res.result.data[i].name,
              Key: res.result.data[i].key,
              system: '', // 系统
              describe: '', //  描述
              Founder: res.result.data[i].createdBy,
              date: newDate,
              id: res.result.data[i].id
            })
          }
          // this.tableData = response.result.content;
          // this.total = response.result.totalElements;
          // this.currentPage = this.currentPage+=1
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
        // this.tableData = response.result.content;
        // this.total = response.result.totalElements;
        // this.currentPage = response.result.number + 1;
      }).catch((error) => {
        console.log('error', error)
      })
    },
    // 分页
    handleSizeChange(val) {
      // this.$request.allList({pageNum:1,pageSize:10}).then(res=>{
      //   console.log(res)
      // })
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange: function(val) {
      // this.$request.allList({pageNum:1,pageSize:10}).then(res=>{
      //   console.log(res)
      // })
      console.log(`当前页: ${val}`)
    }

  }
}
</script>
<style lang="scss" scoped>
  .centent {
    padding: 25px;
  }
  .el-button--text{
    padding: 0;
  }
</style>
